<template>
<!-- 进行input文本封装 -->
  <input type="text"
         class="hminput"
         @input="hminputinput"
         :class="{success:flag,error:!flag}"
         @blur="handlerchange"
         >
</template>
<script>
export default {
  props:{
    rules:{
      // RegExp：正则表达式的类型
      type:RegExp
    },
    // vant框架的引入，使用框架中的toast组件实现用户输入的提示
    // 当数据输入不正确的时候，给用户提示
    msg:{
      type:String,
      default:'用户输入数据不合法'
    }

  },
  data() {
    return {
      flag:true
    }
  },
  methods:{
    hminputinput(e){
      let v = e.target.value
      if(this.rules){
        if(this.rules.test(v)){
          this.flag = true
        }else{
          this.flag = false
        }
      }
      this.$emit('input',v)
    },
    handlerchange(e){
      // 处理用户失焦事件，在失焦之后，立马验证用户数据，给出相对应的提示
      if(this.rules){
        // 通过test这个正则验证方法进行对数据进行验证
        if(!this.rules.test(e.target.value)){
          this.$toast.fail({
            message:this.msg,   //提示框显示的文本内容
            duration:3000,      //提示框显示的时长
            position:'top'       //提示框显示的位置
          })
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
.hminput {
  // width: 360 * 100vw/360;
  width: 100%;
  height: 50px;
  outline: none;
  border: none;
  border-bottom: 3px solid #ccc;
  font-size: 20px;
  line-height: 50px;
  margin: 0 auto;
}
.success {
  border-bottom-color: green;
  color: green;
}
.error {
  border-bottom-color: red;
  color: red;
}
</style>